<template>
  <div class="charts" ref="echarts" />
</template>
<script>
import * as echarts from 'echarts'

export default {
  methods: {
    initLine(xData, seriesData) {
      const option = {
        tooltip: {
          trigger: 'axis',
          // showContent: false,
          // axisPointer: {
          //   type: 'shadow',
          // }
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            // boundaryGap: false,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: xData
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
          }
        ],
        series: [
          {
            type: 'line',
            smooth: true,
            label: {
              show: true,
              position: 'top',
              color: '#4D98FF'
            },
            areaStyle: {
              opacity: 0.4,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#B5D4FF',
                },
                {
                  offset: 1,
                  color: '#FFF',
                },
              ])
            },
            data: seriesData
          }
        ]
      }
      if (!this.echarts) this.echarts = this.$echarts.init(this.$refs.echarts, 'light')
      this.echarts.clear()
      this.echarts.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
  .charts {
    width: 100%;
    height: 120px;
  }
</style>